<!DOCTYPE html>
<html lang="en">

<head>
  <title>热门页面</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/hot.css">
</head>

<body>
  <header>
    <div id="header-content">
      <img src="../image/profile.jpg" id="top">
      <h1>sniper</h1>
    </div>
  </header>
  <nav>
    <ul>
      <a href="../html/index.html">首页</a>
      <a href="../html/search.html">搜索</a>
      <a href="../html/square.html">广场</a>
      <a href="../html/community.html">社区</a>
      <a href="../html/hot.html">热门</a>
      <a href="../html/room.html">房间</a>
      <a href="../html/shopping.html">购物（超链接）</a>
      <a href="../html/message.html">消息</a>
      <a href="../html/my.html">我的</a>
    </ul>
  </nav>
  <main>
    <h1>热点！！！</h1>
    <ul>
      <li>
        <img src="../image/hot_image1.jpg" alt="热点图片 1" class="hot-image"> <!-- 添加热点图片 -->
        <span>1</span>
        <span>澳门吹过大湾区经济风【澳门作为大湾区的核心城市之一，近年来经济发展迅速，吸引了众多投资者的目光。随着大湾区政策的不断推进，澳门的经济将迎来新的发展机遇。这个话题引发了广泛讨论，人们纷纷对澳门的未来充满期待。】</span>
        <span>967.6万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button> <!-- 点赞按钮 -->
          <button onclick="comment()">评论</button> <!-- 评论按钮 -->
          <button onclick="collect()">收藏</button> <!-- 收藏按钮 -->
        </div>
      </li>
      <li>
        <img src="../image/hot_image2.jpg" alt="热点图片 2" class="hot-image">
        <span>2</span>
        <span>吃外卖两分钟 扔外卖两小时【现代生活节奏加快，外卖成为了许多人的日常选择。然而，外卖包装的问题也日益凸显。这个话题揭示了人们在享受便捷的同时，也面临着环保的挑战。如何平衡便捷与环保，成为了人们需要思考的问题。】</span>
        <span class="new">新</span>
        <span>914.9万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image3.jpg" alt="热点图片 3" class="hot-image">
        <span>3</span>
        <span>人生建议：做面照片墙【生活需要仪式感，制作一面照片墙可以记录下我们的美好时光。这个话题提醒我们，要珍惜每一个瞬间，用照片留下回忆，让生活更加丰富多彩。you look look，we do do it，that is easy！you know we know ，we all know】</span>
        <span class="new">新</span>
        <span>782.9万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image4.jpg" alt="热点图片 4" class="hot-image">
        <span>4</span>
        <span>秋冬总要有一件人生大衣吧【秋冬季节，大衣成为了时尚界的宠儿。一件经典的大衣不仅可以保暖，还能提升我们的气质。这个话题引发了人们对秋冬时尚的关注，让我们期待在这个季节里展现自己的风采。you look look，we do do it，that is easy！】</span>
        <span>754.8万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image5.jpg" alt="热点图片 5" class="hot-image">
        <span>5</span>
        <span>大圣你来佳斯是吃胖了吗【这个话题以幽默的方式引发了人们对健康的关注。无论是谁，都应该注意饮食健康，保持身材。同时，也让我们想起了童年时光中的经典角色——大圣，带给我们无尽的欢乐。you look look，we do do it，that is easy！】</span>
        <span>754.8万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image6.jpg" alt="热点图片 6" class="hot-image">
        <span>6</span>
        <span>张馨予出场霸气买下整条街【张馨予的霸气出场引发了广泛关注。她不仅拥有出色的演技，还展现了强大的气场。这个话题让人们看到了她的另一面，也让我们期待她在未来的作品中带给我们更多的惊喜。you look look，we do do it，that is easy！】</span>
        <span class="new">新</span>
        <span>713.9万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image7.jpg" alt="热点图片 7" class="hot-image">
        <span>7</span>
        <span>自律也可以是无痛的【自律是成功的关键之一，但往往让人感到痛苦。这个话题告诉我们，自律也可以是一种享受，只要我们找到适合自己的方法，就能轻松实现目标。让我们从现在开始，培养自律的习惯，迎接更加美好的未来。】</span>
        <span>689.2万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image8.jpg" alt="热点图片 8" class="hot-image">
        <span>8</span>
        <span>宋佳钟楚曦一见面就哭了【宋佳和钟楚曦的感人会面引发了广泛关注。她们之间的深厚友谊让人们感动不已。这个话题让我们看到了娱乐圈中的真情流露，也让我们期待她们在未来的合作中擦出更多的火花。you look look，we do do it，that is easy！】</span>
        <span class="hot">热</span>
        <span>633.8万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
      <li>
        <img src="../image/hot_image9.jpg" alt="热点图片 9" class="hot-image">
        <span>9</span>
        <span>西藏墨脱—眼镜王蛇出没【西藏墨脱地区的自然环境优美，但也存在着许多未知的危险。这个话题提醒我们，在探索自然的同时，要注意安全，保护好自己。同时，也让我们对大自然的神秘充满敬畏之心。you look look，we do do it，that is easy！】</span>
        <span>627.9万</span>
        <div class="interaction">
          <button onclick="like(this)">点赞 <span class="like-count">0</span></button>
          <button onclick="comment()">评论</button>
          <button onclick="collect()">收藏</button>
        </div>
      </li>
    </ul>
  </main>
  <script>
    // 点赞功能函数
    function like(button) {
      var countSpan = button.querySelector('.like-count');
      var currentCount = parseInt(countSpan.textContent);
      countSpan.textContent = currentCount + 1;
    }

    // 评论功能函数（这里仅弹出提示，实际可链接到评论页面）
    function comment() {
      alert('点击进入评论页面，此处可添加更多逻辑。');
    }

    // 收藏功能函数（这里仅弹出提示，实际可进行收藏数据处理）
    function collect() {
      alert('点击收藏，此处可添加更多逻辑。');
    }
  </script>
</body>

</html>